<script>
/*
 * Copyright (c) 2012-2016 RockStor, Inc. <http://rockstor.com>
 * This file is part of RockStor.
 *
 * RockStor is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published
 * by the Free Software Foundation; either version 2 of the License,
 * or (at your option) any later version.
 *
 * RockStor is distributed in the hope that it will be useful, but
 * WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
 * General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program. If not, see <http://www.gnu.org/licenses/>.
 *
 */
</script>

  <div class="row">
  <div class="col-md-8">
  <div class="panel panel-default">
  <div class="panel-heading">Create Share</div>
  <div class="panel-body">
    <form class="form-horizontal" id="add-share-form">
      <div class="messages"></div>
      <div class="form-group">
        <label for="share_name" class="col-sm-4 control-label">Name</label>
        <div class="col-sm-6">
          <input class="form-control" type="text" name="share_name" id="share_name" title="Follow characters are allowed: letter(a-z or A-Z), digit(0-9), hyphen(-), underscore(_) or a period(.).">
        </div>
      </div>
      <div class="form-group">
        <label for="pool_name" class="col-xs-4 control-label">Pool <span class="required">*</span></label>
        <div class="col-sm-6">
          <select class="form-control" id="pool_name" name="pool_name" title="Select pool the share should belong to">
          {{print_pool_names}}
          </select>
        </div>
      </div>
      <div class="form-group">
        <label class="col-xs-4 control-label" for="compression">Compression</label>
        <div class="col-sm-6">
          <select class="form-control" id="compression" name="compression">
            <option value="no">Inherit from pool wide configuration</option>
            <option value="zlib">zlib</option>
            <option value="lzo">lzo</option>
          </select>
        </div>
      </div>
      <div class="form-group">
        <label class="col-xs-4 control-label" for="share_size">Size<span class="required"> *</span></label>
        <div class="col-xs-8">
          <div id="slider" class="control-label" style="width: 400px;"></div>
          <input type="text" style="margin-top: 16px;" class="col-md-3" name="share_size" id="share_size" title="Enter share size in GB or TB">
        </div>
      </div>
      <div class="form-group">
        <div class="col-xs-8 col-xs-offset-4">
          <div style="width: 15px; height: 15px; float: left" class="slider-legend-free"></div> <div>&nbsp;<span id="legend-free-num"></span>&nbsp;Space that is completely free and unprovisioned</div>
          <br>
          <div style="width: 15px; height: 15px; float: left" class="slider-legend-reclaimable"></div> <div>&nbsp;<span id="legend-reclaimable-num"></span>Space that is provisioned for other shares, but currently free</div>
          <br>
          <div style="width: 15px; height: 15px; float: left" class="slider-legend-used"> </div><div>&nbsp;<span id="legend-used-num"></span>Space that is provisioned for other shares and is in use</div>
        </div>
      </div>
      <div class="form-group">
        <div class="col-xs-6 col-xs-offset-4">
          <a id="js-cancel" class="btn btn-default">Cancel</a>
          <input type="Submit" id="create_share" class="btn btn-primary" value="Submit"></input>
        </div>
      </div>
</div><!--panel-body-->
    </form>
  </div> <!-- panel closing -->
</div>
</div>
